<template>
  <div class="warpper-box">
    <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" @btn-search-click="onSearch"
      @btn-reset-click="reset" @btn-time-change="timeChange"/>

    <a-tabs tab-position="left" v-model="tabsIndex" style="margin-top: 20px;" @change="tabChange">
      <a-tab-pane key="1" tab="招行人资(企业)">
        <a-button type="danger" icon="plus" @click="$refs.createInfo.add(tabsIndex)">新增企业开户</a-button>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="id">
          <span slot="balance" slot-scope="text,record">
            <a-popover title="账号余额" trigger="click">
              <template #content>
                <p style="color:red;font-size:30px;margin: 0;">¥{{ balance }}</p>
              </template>
              <a-button type="link" @click="queryBalance(record)" style="padding: 0;">查看余额</a-button>
            </a-popover>
          </span>
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <a-popconfirm title="确认销户?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>销户</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="招行人资(园区)">
        <a-button type="danger" icon="plus" @click="$refs.createInfo.add(tabsIndex)">新增园区开户</a-button>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="id"></a-table>
      </a-tab-pane>
    </a-tabs>

    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>
import {
  pageQueryEnterpriseBankAccount,
  pageQueryParkBankAccount,
  selectBalance,
  closeEnterpriseBankAccount
} from "@/api/human/enterprise"
import {
  PARAMS_OPEN
} from "./form"
import { mapGetters, mapActions } from 'vuex'
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import AddInfo from "./openAccount_add.vue"
import {
  getOrgLists
} from "@/api/human/department"
export default {
  name: 'openAccountList',
  components: {
    AddInfo
  },
  data() {
    return {
      params: {
        fApi: {},
        rule: PARAMS_OPEN,
        option: OPTION_INLINE
      },
      tabsIndex: '1',
      balance: "", // 余额
      table: {
        columns: [],
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },

      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  filters: {

  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  created() {

  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    keyDown(e) {
      if (e.keyCode == 13) {
        this.$refs.table.refresh(true);
      }
    },
    // 获取列表
    async loadTable(flag) {
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        params.name = this.params.fApi.getValue('name');
        params.parkName = this.params.fApi.getValue('name');
        params.accountStatus = this.params.fApi.getValue('accountStatus');
        const time = this.params.fApi.getValue('time');
        params.startTime = time[0];
        params.endTime = time[1];
      }
      this.table.loadData = [];
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      if (this.tabsIndex == '1') {
        this.table.columns = [
          {
            title: '企业名称',
            dataIndex: 'name',
          },
          {
            title: "园区平台名称",
            dataIndex: "parkName",
          },
          {
            title: '账号',
            dataIndex: 'accountNo'
          },
          {
            title: '账户余额',
            dataIndex: 'balance',
            scopedSlots: { customRender: 'balance' }
          },
          {
            title: '状态',
            dataIndex: 'accountStatus',
            customRender: (text, row, index) => {
              if (text == '1') {
                return '已开户'
              } else if (text == '3') {
                return '已销户'
              }
              return ''
            },
          },
          {
            title: '开户时间',
            dataIndex: 'createdTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            scopedSlots: { customRender: 'action' }
          },
        ]
      } else {
        this.table.columns = [
          {
            title: "园区平台名称",
            dataIndex: "parkName",
          },
          {
            title: '账号',
            dataIndex: 'settlementAccount'
          },
          {
            title: '状态',
            dataIndex: 'accountStatus',
            customRender: (text, row, index) => {
              if (text == '1') {
                return '已开户'
              } else if (text == '3') {
                return '已销户'
              }
              return ''
            },
          },
          {
            title: '开户时间',
            dataIndex: 'createdTime',
          }
        ]
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = this.tabsIndex == '1' ? await pageQueryEnterpriseBankAccount(params) : await pageQueryParkBankAccount(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 面板切换
    tabChange(e) {
      this.loadTable(true);
    },
    // 查看余额
    async queryBalance(row) {
      const { code,data } = await selectBalance({id: row.id})
      if (code == 1) {
        this.balance = data;
      }
    },
    timeChange(dates,dateStrings){
      this.params.fApi.setValue({'time':dateStrings})
    },
    addLoad(state) {
      this.loadTable(true);
    },
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await closeEnterpriseBankAccount(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    onSearch() {
      this.loadTable(true);
      // this.selectedRowKeys = [];
      // this.selectedRows = [];
    },
    reset() {
      this.events_form.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
